*{
    /*-webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;*/

    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance:none;
    -webkit-tap-highlight-color:transparent;
}
/*reset*/
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin:0;padding:0;
    border:0;outline:0;
    vertical-align:baseline;
    background:transparent;
    -webkit-font-smoothing: antialiased;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
h1,h2,h3,h4,h5,h6{font-weight: 400;font-size: 16px;}
input{outline: 0 none;}
ul,li{list-style: none;}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #DDD; opacity:1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #DDD;opacity:1;
}

input:-ms-input-placeholder{
    color: #DDD;opacity:1;
}

input::-webkit-input-placeholder{
    color: #DDD;opacity:1;
}

textarea{font:inherit;}
img{width: 100%;}
body{
    font:normal 14px/1.5 Arial,"Microsoft YaHei",tahoma,"Arial Unicode MS",Mingliu,Helvetica;
    font-size: .3rem;
    color:#333;
    margin-left:auto;
    margin-right:auto;
    background-color: #F3F3F3;
}
/*reset*/
.bd0{border:0 none;}
.bdrds0{border-radius: 0;}
.bgFFF{background-color: #fff;}
.colorFFF{color:#FFF;}
.mb20{margin-bottom: 20px;}
.mb10{margin-bottom: 10px;}
.mt10{margin-top: 10px;}
.mt20{margin-top: 20px;}
.mg10{margin: 0 10px;}
.ml10{margin-left: 10px;}
.mr10{margin-right: 10px;}
.fl{float: left;}
.fr{float: right;}
.tac{text-align: center;}
.tal{text-align: left;}
.tar{text-align: right;}
.db{display: block;}
.dh{display: none;}
.dib{display: inline-block;}

.df{
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flex;
    display:flex;
}
.dif{
    display: -webkit-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flex;
    display: inline-flex;
}
.df-absolute-center{
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content:center;
    justify-content:center;
}
.df-justify-center{
    -webkit-justify-content:center;
    justify-content:center;
}
.df-align-center{
    -webkit-align-items: center;
    align-items: center;
}
.df-flex-start{
    -webkit-align-items:flex-start;
    align-items:flex-start;
}
.df-flex-end{
    -webkit-align-items:flex-end;
    align-items:flex-end;
}
.df-stretch{
    -webkit-align-items: stretch;
    align-items: stretch;
}
.df-between{
    -webkit-align-content:space-between;
    align-content:space-between;
}
.df-column{
    -webkit-flex-direction: column;
    flex-direction: column;
}
.df-item{
    width:100%;
    display: -webkit-box;
    display:flex;
    flex-wrap:wrap;
    text-align: center;
    align-items: center;/*垂直居中*/
    justify-content: center;/*水平居中*/
}

.flex-space-between{
    -webkit-justify-content:space-between;
    justify-content:space-between;
}

.flexnone{flex:none!important;}
.flex1{
    -webkit-box-flex: 1!important;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex:1!important;
}
.flex2{
    -webkit-box-flex: 2!important;
    -moz-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex:2!important;
}
.flex3{
    -webkit-box-flex: 3!important;
    -moz-box-flex: 3;
    -webkit-flex: 3;
    -ms-flex: 3;
    flex:3!important;
}
.flex4{
    -webkit-box-flex: 4!important;
    -moz-box-flex: 4;
    -webkit-flex: 4;
    -ms-flex: 4;
    flex:4!important;
}


.bd1{border:1px solid #DFDFDF;}
.foz0{font-size: 0;}
.foz12{font-size: 12px;}
.foz14{font-size: 14px;}
.foz16{font-size: 16px;}
.foz40{font-size: 40px;}
.foz60{font-size: 60px;}

.fwb{font-weight: bold;}

.gray{color:#7C7C7C;}

.poa{position: absolute;}
.por{position: relative;}

.w50{width: 50%;}
.pd10{padding:10px;}
.pl15{padding-left:15px;}
.pr15{padding-right:15px;}
.pd20{padding:20px;}
.pd0{padding: 0!important;}
.h0{height:0;}
.h100{height: 100%;}
.lh32{line-height: 32px;}
.lh34{line-height: 34px;}
.ml10{margin-left: 10px;}
.mg0{margin:0;}
.mg-15{margin-left: -15px;margin-right: -15px;margin-top: -15px;margin-bottom: -15px;}
.g-mt{margin-top: -148px;}
.cup{cursor: pointer;}
.mrauto{margin:auto;}
.underline{text-decoration: underline;}
.form-control[readonly]{background-color: #fff;opacity: 1;}
.clearfix:before{content:none;}
.clearfix:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;}
.form-group:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;}
.absolute-center{
    position: absolute;
    top:50%;
    left:50%;
    max-width: 100%;
    /*max-height: 100%;*/
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.fullpage{
    position: fixed;
    z-index: 999;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}
.txt-cut{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.txt-cut-2{
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.txt-cut-3{
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
}
.txt-cut-4{
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
}
.w10{width: 10%;}
.w20{width: 20%;}
.w30{width: 30%;}
.w40{width: 40%;}
.w50{width: 50%;}
.w60{width: 60%;}
.w70{width: 70%;}
.w80{width: 80%;}
.w90{width: 90%;}
.w100{width: 100%;}
.zi1{z-index: 1;}

.vh100{height:100vh;}
.vh50{height:50vh;}
/*chrome 滚动条*/
::-webkit-scrollbar{width: 0px;height:0px;}
::-webkit-scrollbar-button{display:none;}
::-webkit-scrollbar-track{background-color:black;border-radius: 6px;}
::-webkit-scrollbar-track-piece{background-color: #F5F5F5;}
::-webkit-scrollbar-thumb{margin-right:10px; background-color: #999;border-radius: 6px;}
::-webkit-scrollbar-thumb:vertical{height: 6px;}

::-webkit-scrollbar-corner{background-color:#F5F5F5;}
::-webkit-scrollbar-resizer{background-color:#F5F5F5;}



/*0.5像素边框*/
.half-bd-top,
.half-bd-bottom,
.half-bd-left,
.half-bd-right{
    position: relative;
}
.half-bd-top:after{
    content:"";
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 1px;
    background-color: #DDD;
    -webkit-transform: scale(1,0.5);
    -ms-transform: scale(1,0.5);
    transform: scale(1,0.5);
}
.half-bd-bottom:after{
    content:"";
    position: absolute;
    bottom:0;
    left:0;
    width: 100%;
    height: 1px;
    background-color: #DDD;
    -webkit-transform: scale(1,0.5);
    -ms-transform: scale(1,0.5);
    transform: scale(1,0.5);
}
.half-bd-left:after{
    content:"";
    position: absolute;
    top:0;
    left:0;
    width: 1px;
    height: 100%;
    background-color: #DDD;
    -webkit-transform: scale(0.5,1);
    -ms-transform: scale(0.5,1);
    transform: scale(0.5,1);
}
.half-bd-right:after{
    content:"";
    position: absolute;
    top:0;
    right:0;
    width: 1px;
    height: 100%;
    background-color: #DDD;
    -webkit-transform: scale(0.5,1);
    -ms-transform: scale(0.5,1);
    transform: scale(0.5,1);
}


/**/
.foz22{
    font-size: .22rem;
}
.recharge-list{
	flex-wrap:wrap;
	-webkit-flex-wrap:wrap;
	justify-content: space-between;
	-webkit-justify-content: space-between;
}
.recharge-item{
	padding:.1rem 0;
	margin-bottom: .2rem;
	width:3.25rem;
	height: 1.34rem;
	text-align: center;
	font-size: .28rem;
	border-radius: 2px;
	border:1px solid #D8D8D8;
}
.recharge-item.active{
	border-color:#20D1AC;
	background-color: #20D1AC;
	color:#FFF;
}
.recharge-amount{
	font-weight: bold;
}


.present{
	font-size: .22rem;
}
.present:before{
	content:"送";
	display: inline-block;
	margin-right: .1rem;
	width:.26rem;
	height: .26rem;
	line-height: .26rem;
	font-size: .18rem;
	border-radius: 2px;
	color:#FFF;
	background-color: #F67A56;
}
.recharge-item.active .present,
.recharge-item.active .gray{
	color:#FFF;
}

.fade-enter-active, .fade-leave-active {
	transition: all .5s
}
.fade-enter, .fade-leave-to {
	transform: translateY(10px);
 	opacity: 0;
}


.recharge {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

.recharge-shade {
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
}

.recharge-shade {
    background-image: url("http://novel-pay.oss-cn-shenzhen.aliyuncs.com/images/background.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #b2b2b2;
}

.recharge-body {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: .4rem;
    height: 9rem;
    background-color: #fff;
}

.close {
    position: absolute;
    top: .2rem;
    right: .2rem;
    padding: .2rem;
    width: .8rem;
}

.divider {
    margin-top: .5rem;
    margin-bottom: .2rem;
    padding: 0 1rem;
}

.tips {
    padding: 0 .4rem;
    font-size: .24rem;
}

ul,
li {
    list-style: disc;
}

.recharge-body {
    transform: translateY(0);
    transition: all .2s ease-out;
}

.recharge-fade-enter .recharge-body,
.recharge-fade-leave-to .recharge-body{
    transform: translateY(100%);
}
.page-wrap{
	padding:.3rem;
}
.balance{
	font-size: .4rem;
	color:#FD4D4C;
	border-bottom:1px solid #CBCBCB;
}
